<template>
  <div class="page_root" data-page-name="创建配送方案" data-page-identification="t_ziomekx4ys">
      <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
          <!-- begin vid_rkqe6n181v 自定义模板_wj7t65m9yw -->
          <a-spin :spinning="loading">
              <div class="create-plan">
                  <a-steps :current="current" class="step">
                      <a-step title="需求导入" />
                      <a-step title="企业发货上限" />
                      <a-step title="企业至区域发货约束" />
                      <a-step title="方案优化" />
                  </a-steps>
                  <div class="content">
                      <div v-show="current === 0" class="import-div">
                          <a-row :gutter="24" class="top-row">
                              <a-col :span="5"
                                  ><div class="top-div">
                                      <div>全部区域总需求量：</div>
                                      <div><span class="top-num">1111128</span>吨</div>
                                  </div></a-col
                              >
                              <a-col :span="5"
                                  ><div class="top-div">
                                      <div>全部区域袋装需求量：</div>
                                      <div><span class="top-num">1111128</span>吨</div>
                                  </div></a-col
                              >
                              <a-col :span="5"
                                  ><div class="top-div">
                                      <div>全部区域散装需求量：</div>
                                      <div><span class="top-num">1111128</span>吨</div>
                                  </div></a-col
                              >
                              <a-col :span="5"
                                  ><div class="top-div">
                                      <div>全部区域熟料需求量：</div>
                                      <div><span class="top-num">1111128</span>吨</div>
                                  </div></a-col
                              >
                          </a-row>
                          <div class="table-header tag">
                              <div>区域需求量列表</div>
                              <div class="tag-list">
                                  <a-checkbox v-model:checked="distributionRemain" class="distribution-remain"
                                      >剩余发货量配送至运费最低区域</a-checkbox
                                  >
                                  <a-input v-model:value="filterTable1" placeholder="请输入区域名称关键词">
                                      <template #suffix>
                                          <search-outlined />
                                      </template>
                                  </a-input>
                                  <a-button type="link" style="margin-right: -10px" @click="handlerDownloadTemplate"
                                      >下载模板</a-button
                                  >
                                  <a-upload :file-list="[]" :before-upload="beforeUpload">
                                      <a-button type="primary">导入Excel</a-button>
                                  </a-upload>
                              </div>
                          </div>
                          <a-table
                              :columns="columns1"
                              v-model:current="currentPage"
                              :data-source="tableData1"
                              @change="pageChange"
                          >
                              <template #bodyCell="{ column, index }">
                                  <template v-if="column.dataIndex === 'demand'">
                                      <a-input-number
                                          v-model:value="tableData1[(currentPage - 1) * 10 + index].demand"
                                          :min="0"
                                          @change="debounceGetStatistics"
                                      />
                                  </template>
                              </template>
                          </a-table>
                      </div>
                      <div v-show="current === 1">
                          <a-row>
                              <a-col :span="6">
                                  <a-form>
                                      <a-form-item
                                          label="选择企业发货上限"
                                          class="date-group"
                                          v-bind="validateInfos.duration"
                                      >
                                          <a-select
                                              style="width: 100%"
                                              v-model:value="formData.duration"
                                              :options="upperLimitList"
                                          />
                                      </a-form-item>
                                  </a-form>
                              </a-col>
                              <a-col :span="1" offset="16">
                                  <a-button type="primary">导出excel</a-button>
                              </a-col>
                          </a-row>
                          <div class="second-table">
                              <a-row>
                                  <a-col :span="4">1</a-col>
                                  <a-col :span="4">2</a-col>
                                  <a-col :span="4">3</a-col>
                                  <a-col :span="4">4</a-col>
                              </a-row>
                          </div>
                      </div>
                      <div v-show="current === 2">
                          <div>
                              <a-statistic
                                  class="gather"
                                  title="运输总费用"
                                  :value="statistics4.num1"
                                  :precision="2"
                                  suffix="万元"
                                  :value-style="{ color: '#D9001B' }"
                              />
                              <a-statistic
                                  class="gather"
                                  title="汽运费用"
                                  :value="statistics4.num2"
                                  :precision="2"
                                  suffix="万元"
                                  :value-style="{ color: '#D9001B' }"
                              />
                              <a-statistic
                                  class="gather"
                                  title="火运费用"
                                  :value="statistics4.num3"
                                  :precision="2"
                                  suffix="万元"
                                  :value-style="{ color: '#D9001B' }"
                              />
                              <a-statistic
                                  class="gather"
                                  title="船运费用"
                                  :value="statistics4.num4"
                                  :precision="2"
                                  suffix="万元"
                                  :value-style="{ color: '#D9001B' }"
                              />
                              <a-statistic
                                  class="gather"
                                  title="散装总配送量"
                                  :value="statistics4.num5"
                                  :precision="2"
                                  suffix="吨"
                                  :value-style="{ color: '#D9001B' }"
                              />
                              <a-statistic
                                  class="gather"
                                  title="袋装总配送量"
                                  :value="statistics4.num6"
                                  :precision="2"
                                  suffix="吨"
                                  :value-style="{ color: '#D9001B' }"
                              />
                              <a-statistic
                                  class="gather"
                                  title="熟料总配送量"
                                  :value="statistics4.num7"
                                  :precision="2"
                                  suffix="吨"
                                  :value-style="{ color: '#D9001B' }"
                              />
                          </div>
                          <div class="table-header">
                              <div>
                                  <a-input v-model:value="filterTable4" placeholder="请输入企业、区域名称关键词">
                                      <template #suffix>
                                          <search-outlined />
                                      </template>
                                  </a-input>
                                  <!-- 配送调整 暂时取消 -->
                                  <!-- <a-button v-if="!editTable4" type="primary" @click="handlerEditTable2">配送调整</a-button>
            <template v-else>
              <a-button type="primary" @click="editTable4 = false">确认调整</a-button>
              <a-button @click="handlerCancel">取消调整</a-button>
            </template> -->
                                  <!-- <a-button style="margin-left: 8px" type="primary" @click="handlerDownload">导出Excel</a-button> -->
                              </div>
                          </div>
                          <a-table :columns="columns4" :data-source="tableData4">
                              <template #bodyCell="{ column, index, record, text }">
                                  <template v-if="column.dataIndex === 'freight'">
                                      <a-input-number
                                          v-if="editTable4"
                                          v-model:value="tableData4[index].freight"
                                          :min="0"
                                          @change="tableData4[index].locked = true"
                                      />
                                      <template v-else>
                                          {{ formatThousandth(text) }}
                                      </template>
                                  </template>
                                  <template
                                      v-if="
                                          ['distributionQuantity', 'remainDistributionQuantity'].includes(
                                              column.dataIndex
                                          )
                                      "
                                      >{{ formatThousandth(text) }}</template
                                  >
                                  <template v-if="column.dataIndex === 'transportType'">
                                      {{ transportTypeMap[text] }}
                                  </template>
                              </template>
                          </a-table>
                      </div>
                  </div>
                  <div class="footer">
                      <a-button type="primary" v-if="current === 3" @click="handlerSave">保存</a-button>
                      <a-button type="primary" v-if="current > 0" @click="changeCurrent(false)">上一步</a-button>
                      <a-button type="primary" v-if="current === 1 || current === 0" @click="handlerValidate"
                          >下一步</a-button
                      >
                      <a-button type="primary" v-if="current === 2" @click="handlerOptimize">开始优化</a-button>
                      <a-button type="primary" v-if="current === 3" @click="handlerSubmit">保存</a-button>
                      <!-- <a-button type="primary" v-if="current === 3" @click="handlerOptimize">重新优化</a-button> -->
                      <a-button @click="handlerUnset">取消</a-button>
                  </div>
              </div>
          </a-spin>
          <!-- end vid_rkqe6n181v 自定义模板_wj7t65m9yw -->
      </a-spin>
  </div>
</template>
<script setup>
import {
  h,
  ref,
  reactive,
  toRaw,
  markRaw,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
import {
  cloneDeep,
  isNullOrEmpty,
  isEmptyArr,
  isNullOrUnDef,
  localGet,
  isContained,
  isArray,
  isEmpty,
  merge,
  getDifferenceArray,
  isObject,
  traversalTreeStructure,
  checkCaseCondition,
  renderStringInTemplate,
  handleBreadcrumbJump,
  throttle,
  permission
} from '@/utils/index'
import dayjs from 'dayjs'
import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'
/*** PUBLISH_EXEGESIS ***
    import UserTableRecords from '@/model/UserTableRecords';
    *** PUBLISH_EXEGESIS ***/

// 获取传入的流程ID
const props = defineProps({
  processInstanceId: {
      type: String
  }
})
const immediateWatch = (source, callback) => {
  watch(source, callback, { deep: true, immediate: true })
}

/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = []
const pageLoading = reactive({
  loading: false,
  tip: undefined
})

// 处理校验
const setSubFormName = (parentInfo, name) => {
  return [parentInfo.parents, parentInfo.cycleIndex, name]
}

/* ========================== 属性定义 ========================== */

/* -------------------------- 元素数据引用 -------------------------- */

/* ========================== 元素数据引用 ========================== */

/* -------------------------- 页面数据 -------------------------- */

/* ========================== 页面数据 ========================== */

/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */

/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */

/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
  processInstanceId: props.processInstanceId
})

/* ========================== 页面参数 ========================== */

/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================

/* ========================== 组件事件处理方法 ========================== */

/* -------------------------- 生命周期 -------------------------- */
onMounted(() => {})

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
      repeat ? clearInterval(timer) : clearTimeout(timer)
  })
})

/* ========================== 生命周期 ========================== */

/* -------------------------- 数据关联处理 -------------------------- */

/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */

/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */

// ================================定制化逻辑========================================
import { Form } from 'ant-design-vue'
const useForm = Form.useForm
function debounce(callback, timer) {
  let ticker = null
  return () => {
      if (ticker) {
          clearTimeout(ticker)
      }
      ticker = setTimeout(() => {
          callback.apply(callback, arguments)
      }, timer)
  }
}

function downloadExcel(response, name) {
  const blob = new Blob([response], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
  })
  const downloadElement = document.createElement('a')
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  downloadElement.href = href
  downloadElement.download = name // 下载后文件名
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href)
  return href
}
/**********************************  页面1 start  ****************************************/
const current = ref(1)
const loading = ref(false)
const timeType = ref(1)
const formData = reactive({
  name: '',
  duration: []
})
const rules = reactive({
  name: [
      {
          required: true,
          message: '配送方案名称必填'
      },
      {
          validator: async (_, value) => {
              if (!value) {
                  return Promise.resolve()
              }
              const { data } = await post(`/solution-zjcnfsn-distribution/api/v1/distribution/exist/${value}`)
              return data ? Promise.resolve() : Promise.reject(new Error('该配送名称重复'))
          }
      }
  ],
  duration: [
      {
          required: true,
          message: '配送时间必填'
      }
  ]
})
const columns1 = [
  {
      title: '区域名称',
      dataIndex: 'areaName'
  },
  {
      title: '包装形式',
      dataIndex: 'packingTypeName'
  },
  {
      title: '产品品牌',
      dataIndex: 'brandName'
  },
  {
      title: '产品品种',
      dataIndex: 'categoryName'
  },
  {
      title: '运输方式',
      dataIndex: 'transportTypeName'
  },
  {
      title: '需求量(吨)',
      dataIndex: 'demand'
  }
]

const transportTypeMap = {
  TRAIN: '火运',
  SHIP: '船运',
  BUS: '汽运'
}

let tableData1 = ref([])
// 并不是真克隆 保留本体但是过滤的数据发生改变 此数据也应该改变
let tableData1Clone = []

const currentPage = ref(1)
function pageChange({ current }) {
  currentPage.value = current
}
const statistics = reactive({
  num1: 0,
  num2: 0,
  num3: 0,
  num4: 0
})
function getStatistics() {
  let num1 = 0
  let num2 = 0
  let num3 = 0
  let num4 = 0
  tableData1Clone.forEach(({ demand, packingTypeName }) => {
      num1 += Number(demand)
      packingTypeName = packingTypeName.replace('水泥', '')
      if (packingTypeName === '袋装') {
          num2 += Number(demand)
      } else if (packingTypeName === '散装') {
          num3 += Number(demand)
      } else if (packingTypeName === '熟料') {
          num4 += Number(demand)
      }
  })
  statistics.num1 = num1
  statistics.num2 = num2
  statistics.num3 = num3
  statistics.num4 = num4
}

function beforeUpload(file) {
  const data = new FormData()
  data.append('file', file)
  loading.value = true
  post('/solution-zjcnfsn-distribution/api/v1/distribution/area_demand/import', data).then(({ errorMsg, data }) => {
      loading.value = false
      if (errorMsg) {
          message.error(errorMsg)
      } else {
          tableData1Clone = tableData1.value = data
          getStatistics()
      }
  })
  return false
}

const { resetFields, validate, validateInfos } = useForm(formData, rules)
function changeCurrent(isPlus = true) {
  if (isPlus) {
      current.value++
  } else {
      current.value--
  }
}

function handlerValidate() {
  changeCurrent()
}
const filterTable1 = ref('')
// 剩余发货量配送至运费最低区域
const distributionRemain = ref(true)

function changeTable1() {
  tableData1.value = tableData1Clone.filter(item => {
      return item.areaName.indexOf(filterTable1.value) !== -1
  })
}

changeTable1 = debounce(changeTable1, 300)

watch(
  () => filterTable1.value,
  () => {
      filterTable1.value
      changeTable1()
  }
)
const formatThousandth = value => {
  if (!value || isNaN(value)) {
      return value || '0.00'
  }
  const [int, fraction] = Number(value).toFixed(2).split('.')
  var reg = /(\d)(?=(?:\d{3})+$)/g
  return int.replace(reg, '$1,') + (!!fraction ? '.' + fraction : '')
}
function handlerDownloadTemplate() {
  get(`/solution-zjcnfsn-distribution/api/v1/template/download/distribution_optimizing_area_demand`, null, {
      responseType: 'arraybuffer'
  }).then(res => {
      if (res.data) {
          downloadExcel(res.data, '区域需求量列表模板.xlsx')
      } else {
          downloadExcel(res, '区域需求量列表模板.xlsx')
      }
  })
}


/**********************************  页面1 end  ****************************************/

/**********************************  页面2 start  ****************************************/



// 需求量变化 修改统计的相关数据
const debounceGetStatistics = debounce(getStatistics, 300)


const tableData4 = ref([])
let tableData2Clone = tableData4.value
const distributionId = ref('')

let uuid = ''

function genUUID() {
  return (Math.random() * 100000).toFixed(0)
}

function handlerOptimize() {
  loading.value = true
  tableData4.value = tableData2Clone = []
  const data = {
      uuid: uuid || genUUID(),
      name: formData.name,
      duration: formData.duration,
      durationType: String(timeType.value),
      areaDemandList: tableData1.value,
      adjustedItem: current.value === 1 ? [] : tableData4.value,
      distributionRemain: distributionRemain.value
  }

  let timer = null
  post('/solution-zjcnfsn-distribution/api/v1/distribution/optimize', data).then(({ errorMsg, data }) => {
      if (errorMsg) {
          message.error(errorMsg)
          loading.value = false
      } else {
          distributionId.value = data
          timer = setInterval(() => {
              get(`/solution-zjcnfsn-distribution/api/v1/distribution/optimize/${distributionId.value}`).then(
                  ({ errorMsg, data }) => {
                      if (errorMsg) {
                          message.error(errorMsg)
                          loading.value = false
                      }
                      if (data) {
                          loading.value = false
                          tableData4.value = tableData2Clone = data
                          clearInterval(timer)
                          if (current.value === 1) {
                              changeCurrent()
                          }
                      }
                  }
              )
          }, 1000)
      }
  })
}

/**********************************  页面2 end  ****************************************/

/**********************************  页面4 start  ****************************************/

function handlerDownload() {
  get(`/solution-zjcnfsn-distribution/api/v1/distribution/${distributionId.value}/export`, null, {
      responseType: 'arraybuffer'
  }).then(res => {
      if (res.data) {
          downloadExcel(res.data, `${formData.name}.xlsx`)
      } else {
          downloadExcel(res, `${formData.name}.xlsx`)
      }
  })
}

const filterTable4 = ref('')

function changeTable4() {
  tableData4.value = tableData2Clone.filter(item => {
      return (
          item.enterpriseName.indexOf(filterTable4.value) !== -1 || item.areaName.indexOf(filterTable4.value) !== -1
      )
  })
}

changeTable4 = debounce(changeTable4, 300)

watch(
  () => filterTable4.value,
  () => {
      filterTable4.value
      changeTable4()
  }
)

const editTable4 = ref(false)
const columns4 = [
  {
      title: '企业名称',
      dataIndex: 'enterpriseName'
  },
  {
      title: '中转仓',
      dataIndex: 'transferName'
  },
  {
      title: '区域名称',
      dataIndex: 'areaName'
  },
  {
      title: '运输方式',
      dataIndex: 'transportType'
  },
  {
      title: '包装类型',
      dataIndex: 'packingTypeName'
  },
  {
      title: '产品品牌',
      dataIndex: 'brandName'
  },
  {
      title: '产品品种',
      dataIndex: 'category'
  },
  {
      title: '配送量(吨)',
      dataIndex: 'distributionQuantity'
  },
  {
      title: '剩余配送量(吨)',
      dataIndex: 'remainDistributionQuantity'
  },
  {
      title: '配送运费(元)',
      dataIndex: 'freight'
  }
]

const statistics4 = reactive({
  num1: 0,
  num2: 0,
  num3: 0,
  num4: 0,
  num5: 0,
  num6: 0,
  num7: 0
})
function getStatistics2() {
  let num1 = 0
  let num2 = 0
  let num3 = 0
  let num4 = 0
  let num5 = 0
  let num6 = 0
  let num7 = 0
  tableData2Clone.forEach(
      ({ freight, distributionQuantity, transportType, packingTypeName, remainDistributionQuantity }) => {
          num1 += Number(freight)

          if (transportType === 'BUS') {
              num2 += Number(freight)
          } else if (transportType === 'TRAIN') {
              num3 += Number(freight)
          } else if (transportType === 'SHIP') {
              num4 += Number(freight)
          }
          packingTypeName = packingTypeName.replace('水泥', '')
          if (packingTypeName === '袋装') {
              num6 += Number(distributionQuantity)
              num6 += Number(remainDistributionQuantity)
          } else if (packingTypeName === '散装') {
              num5 += Number(distributionQuantity)
              num5 += Number(remainDistributionQuantity)
          } else if (packingTypeName === '熟料') {
              num7 += Number(distributionQuantity)
              num7 += Number(remainDistributionQuantity)
          }
      }
  )
  statistics4.num1 = num1
  statistics4.num2 = num2
  statistics4.num3 = num3
  statistics4.num4 = num4
  statistics4.num5 = num5
  statistics4.num6 = num6
  statistics4.num7 = num7
}

watch(
  () => tableData4.value,
  () => {
      getStatistics2()
  }
)

function handlerEditTable2() {
  tableData2Clone = cloneDeep(tableData4.value)
  editTable4.value = true
}

function handlerCancel() {
  tableData4.value = cloneDeep(tableData2Clone)
  editTable4.value = false
}

function handlerSave() {
  loading.value = true
  post('/solution-zjcnfsn-distribution/api/v1/distribution', { id: distributionId.value }).then(({ errorMsg }) => {
      loading.value = false
      if (errorMsg) {
          message.error(errorMsg)
      } else {
          message.success('保存成功')
      }
  })
}

function handlerUnset() {
  current.value = 0
  uuid = undefined
  distributionId.value = ''
  currentPage.value = 1
  filterTable1.value = ''
  filterTable4.value = ''
  tableData1.value = tableData1Clone = []
  tableData4.value = tableData2Clone = []
  getStatistics()
  resetFields()
}
</script>
<style lang="less" scoped>
.page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container) {
  height: 100%;
}
.table-moreBtn_down {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
  background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
  z-index: 1;
}
/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 15px !important;
  width: calc(100% - 15px);
}
:deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 30px !important;
  width: calc(100% - 30px);
}
:deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 45px !important;
  width: calc(100% - 45px);
}
:deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 60px !important;
  width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list) {
  height: 100%;
  width: 50%;
}
.vid_rkqe6n181v {
  width: 100%;
}

.create-plan {
  height: fill-available;
  height: -webkit-fill-available;
  margin: 20px;
}
.create-plan > * {
  background: #fff;
}
.step {
  border-bottom: 1px solid rgba(225, 228, 237, 1);
  padding: 20px 12%;
}
.footer {
  width: 100%;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  display: flex;
  justify-content: center;
}
.footer > * {
  margin-left: 8px;
}

.content {
  min-height: 73vh;
  padding: 20px 20px 50px;
}
.top-row {
  border-bottom: 1px dashed rgba(225, 228, 237, 1);
}
.top-div {
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(243, 248, 254, 1) 100%);
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.top-num {
  color: red;
  font-weight: 600;
  display: inline-block;
  margin-right: 5px;
}
.second-table {
  margin-top: 10px;
}

.date-group .aps-form-item-control-input-content {
  display: flex;
  align-items: center;
}
.date-group .aps-form-item-control-input-content span {
  margin: 0 10px;
}
.radio {
  margin-left: 15px;
}
.aps-form-item-has-error .aps-radio-button-wrapper {
  border-color: #d9d9d9 !important;
}
.aps-form-item-has-error .aps-radio-button-wrapper:not(:first-child)::before {
  display: none;
}

.table-header {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-indent: 10px;
}
.table-header.tag {
  border-left: 8px solid #1890ff;
}
.table-header div:last-child {
  display: flex;
}

.table-header div:last-child > .aps-btn {
  margin-left: 8px;
}

.gather {
  display: inline-block;
  border: 1px solid #f0f0f0;
  padding: 10px 25px;
  box-shadow: 5px 4px 10px 0px rgba(0, 0, 0, 0.3);
  margin-right: 10px;
  background: linear-gradient(#cff1f1, #fff, #fff, #fff);
}

.gather:nth-child(4) {
  margin-right: 50px;
}

.aps-upload.aps-upload-select {
  display: block;
}

.tag-list {
  align-items: center;
}

.distribution-remain {
  white-space: nowrap;
}
</style>
